<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <el-table :data="skuList" border stripe>
        <el-table-column type="index" width="50" label="序号" />
        <el-table-column
          label="名称"
          prop="skuName"
          width="120"
        ></el-table-column>
        <el-table-column label="描述" prop="skuDesc"></el-table-column>
        <el-table-column label="默认图片" width="150">
          <template v-slot="{ row }">
            <img :src="row.skuDefaultImg" width="100" alt="" />
          </template>
        </el-table-column>

        <el-table-column
          label="重量"
          prop="weight"
          width="80"
        ></el-table-column>
        <el-table-column label="价格" prop="price" width="80"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button
              v-if="row.isSale === 0"
              type="info"
              size="small"
              icon="ele-Top"
              @click="onSale(row)"
            ></el-button>
            <el-button
              v-else
              type="success"
              size="small"
              icon="ele-Bottom"
              @click="cancelSale(row)"
            ></el-button>
            <el-button
              type="primary"
              size="small"
              icon="ele-Edit"
              @click="ElMessage.info('正在开发中')"
            ></el-button>
            <el-button
              type="info"
              size="small"
              icon="ele-Warning"
              @click="openDrawer(row)"
            ></el-button>
            <el-button
              type="danger"
              size="small"
              icon="ele-Delete"
              @click="deleteSku(row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:page-size="pageSize"
        :page-count="pageCount"
        :pager-count="5"
        :page-sizes="[3, 5, 7, 9]"
        v-model:current-page="currentPage"
        layout=" prev, pager, next, sizes"
      />
    </el-card>

    <el-drawer v-model="drawer" direction="rtl" size="50%">
      <el-row :gutter="20">
        <el-col :span="5">名称</el-col>
        <el-col :span="19">{{ skuDetail.skuName }}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">描述</el-col>
        <el-col :span="19">{{ skuDetail.skuDesc }}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">价格</el-col>
        <el-col :span="19">{{ skuDetail.price }}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">平台属性</el-col>
        <el-col :span="19">
          <el-tag
            type="primary"
            size="small"
            v-for="item in skuDetail.skuAttrValueList"
            :key="item.id"
            >{{ item.attrName }}-{{ item.valueName }}</el-tag
          >
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">销售属性</el-col>
        <el-col :span="19">
          <el-tag
            type="primary"
            size="small"
            v-for="item in skuDetail.skuSaleAttrValueList"
            :key="item.id"
            >{{ item.saleAttrName }}-{{ item.saleAttrValueName }}</el-tag
          ></el-col
        >
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">商品图片</el-col>
        <el-col :span="19">
          <el-carousel trigger="click" height="150px">
            <el-carousel-item
              v-for="item in skuDetail.skuImageList"
              :key="item.id"
            >
              <img :src="item.imgUrl" alt="" />
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "Sku",
});
</script>

<script setup lang="ts">
import {
  reqAllSkuList,
  reqCancelSale,
  reqDeleteSku,
  reqOnSale,
  reqSkuDetail,
  type skuInfoItemDetailType,
  type skuInfoItemType,
  type skuInfoListType,
} from "@/api/sku";
import { ElCarousel, ElMessage } from "element-plus";
import { nextTick, onMounted, ref, watch } from "vue";
//定义页码数据
const pageSize = ref(8);
const pageCount = ref(0);
const currentPage = ref(1);
const loading = ref(false);

//定义请求回来的数据
const skuList = ref<skuInfoListType>([]);
const initData = async () => {
  loading.value = true;
  try {
    const re = await reqAllSkuList(currentPage.value, pageSize.value);
    skuList.value = re.records;
    pageCount.value = re.pages;
    loading.value = false;
  } catch (e: any) {
    ElMessage.error(e.message);
    loading.value = false;
  }
};
onMounted(() => {
  initData();
});

// 上架
const onSale = async (row: skuInfoItemType) => {
  loading.value = true;
  try {
    await reqOnSale(row.id as number);
    ElMessage.success("上架成功");
    initData();
    loading.value = false;
  } catch (e: any) {
    ElMessage.error(e.message);
  }
};

// 下架
const cancelSale = async (row: skuInfoItemType) => {
  loading.value = true;
  try {
    await reqCancelSale(row.id as number);
    ElMessage.success("下架成功");
    initData();
    loading.value = false;
  } catch (e: any) {
    ElMessage.error(e.message);
  }
};

// 删除
const deleteSku = async(row:skuInfoItemType)=>{
  try {
    await reqDeleteSku(row.id as number);
    ElMessage.success("删除成功");
    initData();
  } catch (e: any) {
    ElMessage.error(e.message);
  }
};

//页码
watch([pageSize, currentPage], () => {
  initData();
});

//控制抽屉的代码
const drawer = ref(false);


const carousel = ref<InstanceType<typeof ElCarousel> | null>(null);
//打开抽屉回调函数
const openDrawer = async (row: skuInfoItemType) => {
  drawer.value = true;
  try{
    const re = await reqSkuDetail(row.id as number)
    skuDetail.value = re
    //在拿到数据之后，我们手动的切换幻灯片(放在异步)
    nextTick(() => {
      carousel.value?.setActiveItem(0);
    });
  }catch(e:any){
    ElMessage.error(e.message)
  }
};


//定义sku详细信息的初始数据
const skuDetail = ref<skuInfoItemDetailType>({
  id: 0,
  spuId: 0, //所在的spuId
  price: 0, //当前sku的价格
  skuName: "", //当前sku的名称
  skuDesc: "", //当前sku的描述
  weight: "", //当前sku的重量
  tmId: 0, //当前sku所在的品牌id
  category3Id: 0, //当前sku所在的三级分类的id
  skuDefaultImg: "", //当前sku的默认的图片
  isSale: 0, //当前sku是否上架
  createTime: "", //当前sku的创建时间
  skuImageList: [],
  skuAttrValueList: [],
  skuSaleAttrValueList: [],
});
</script>

<style scoped></style>
